import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import { EnvironmentOutline, EyeOutline } from 'antd-mobile-icons'
import { getJob } from "../../utils/request"
export default function MoreRecommed() {
  const [jobList, setJobList] = useState([])
  const navigate = useNavigate()
  useEffect(() => {
    getJob().then(res => {
      setJobList(res.data.plist)
    })
  }, [])

  const back = () => {
    navigate(-1)
  }

  return (
    <div className='more'>
      <div className='more-top'>
        <NavBar onBack={back}>更多推荐</NavBar>
      </div>
      <div className='more-body' >
        {
          jobList.slice(1,6).map((item, index) => {
            return <div className='more-item' key={item._id} onClick={() => {
              navigate("/detail?_id=" + item._id)
            }} >
              <div className='item-top'>
                <img src={`/src/component/ysh/imgs/` + item.companyLogo} alt="" />
                <span>{item.companyName}</span>
              </div>
              <div className='item-body'>
                <h3>{item.postName}</h3>
                <span>{item.postSalaryLow}-{item.postSalaryHigh}K</span>
              </div>
              <div className='item-bottom'>
                <div className='item-bottom-left'>
                  <div>
                    <EnvironmentOutline />
                  </div>
                  <span>{item.companyAddress}</span>
                </div>
                <div className='item-bottom-right'>
                  <div>
                    <EyeOutline />
                  </div>
                  <span>{item.postView}</span>
                </div>
              </div>
            </div>
          })
        }
      </div>
    </div>
  )
}
